<template>
    <div>
        <Tables 
        :title ='title' 
        :butns = 'butns' 
        :field = 'field' 
        :tableData ='tableData' 
        :pageSize='pageSize'
        :totalNum="total_num" 
        :rankable ="true"
        :collectField = "collect_field" 
        :curPage ="cur_page" 
        :clearSelectItems="selectedItems"
        @reset="reset"  
        @loadData ="loadData" 
        @sentSelectedItems="getSelectedItems"
        @sentEditData="getEditData"
        @changePageSize = 'changePageSize'
        @rankData = "rankData"
        ></Tables>

        <trapModals :id ="'trap_modal'" :title="title" @sentSetType = "getSetType"></trapModals>
        
        <Modals 
        :id ="'modal'" 
        :title ='title' 
        :field = 'field' 
        :collectField = "collect_field" 
        :selectItem = "select_item" 
        :status = "status"
        :errorMsg="errorMsg" 
        :type="type" 
        :selectedItems="selectedItems" 
        :editData = "edit_data"
        @modalEvent ="loadData"
        @sentErrorMsg = "getErrorMsg"
        @addEvent = 'addData'
        @delEvent = 'delData'
        @editEvent = 'editData'
        ></Modals>

        <stepModal 
        :id = "'quick_set'" 
        :title="title" 
        :errorMsg = "errorMsg" 
        :field = "field"
        :selectItem = "select_item" 
        :addStep="add_step"  
        :status = "status" 
        @addSubmit="addData" 
        @sentStep = "getStep"
        ></stepModal>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import trapModals from './solts/trapModals'
    import stepModal from './solts/stepModal'

    import defendService from 'services/defendService' 
    import SystemService from 'services/systemService'
    import PageData from 'libs/PageData'

    export default {
		components:{
		    Tables,
            Modals,
            trapModals,
            stepModal
	    },
        data() {
            return{
                title:this.$t('safeplot.navBtn9'),
                butns: [
                    {
                        type:'add',
                        name:this.$t('common.addBtn'),
                        event:'addEvent',
                        icon:'/static/img/add.png',
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:this.$t('common.delBtn'),
                        event:'delEvent',
                        icon:'/static/img/delete.png',
                        class:'del_btn',
                    },
                    {
                        type:'edit',
                        name:this.$t('common.editBtn'),
                        event:'editEvent',
                        icon:'/static/img/modpic.png',
                        class:'edit_btn',
                    }
                ],
                field: [
                    {
                        type:'checkbox',
                    },
                    {
                        type:'rank',
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.fakecTableTh1'),
                        name:'name',          
                        regex:/^\w{1,9}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remark1')   
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.fakecTableTh2'),
                        name:'t_ip_mac',
                        regex:/(^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$)|(^(!*(2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)(\/(3[0-2]|2[0-9]|1[0-9]|[1-9]))*(\-(!*(2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?))*(\/(3[0-2]|2[0-9]|1[0-9]|[1-9]))*$)/,
                        requried:true, 
                        remark:this.$t('safeplot.fakewRemark1'),
                        ellipsis:'max-width:120px;'
                    },
                    {
                        type:'checkinput',
                        label:this.$t('safeplot.fakecTableTh3'),
                        name:'t_ip_type',
                        regex:/\S/,
                        requried:true, 
                        remark:this.$t('safeplot.fakecRemark1') ,
                        emums:[
                            {
                                label:this.$t('safeplot.Vip'),
                                value:'1'
                            },{
                                label:this.$t('safeplot.Wip'),
                                value:'2'
                            }
                        ],
                        disabled:false
                    },
                    {
                        type:'textarea',
                        label:this.$t('safeplot.fakecTableTh4'),
                        name:'t_port',
                        regex:/^((([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5]))(\:([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])){0,1})(\,(([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5]))(\:([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])){0,1}){0,9}$/,
                        requried:true, 
                        remark:this.$t('safeplot.fakewRemark2'),
                        ellipsis:'max-width:100px;',     
                    },
                    {
                        type:'ipinput',
                        label:this.$t('safeplot.fakecTableTh5'),
                        name:'s_ip',
                        regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
                        requried:false, 
                        remark:this.$t('safeplot.fakecRemark2')  
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.fakecTableTh6'),
                        name:'s_port',
                        regex:/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/,
                        requried:false, 
                        remark:this.$t('safeplot.fakecRemark3')  
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.fakecTableTh7'),
                        name:'vlan_id',
                        regex:/(^\d$)|(^[1-9]\d{0,2}$)|(^[1-3]\d{3}$)|(^40\d[0-4]$)/,
                        requried:true, 
                        remark:this.$t('safeplot.maskRemark2')
                    },
                    {
                        type:'select',
                        label:this.$t('safeplot.fakecTableTh8'),
                        name:'group_id',
                        emums:null,//下拉选项
                        regex:/\S+/,
                        requried:true, 
                        remark:this.$t('safeplot.remark1')   
                    }
                ],
                tableData:[],
                pageSize: [10, 20, 40, 80],
                size:10,
                total_num:1,
                cur_page:1,
                collect_field:'id',
                select_item:[],
                status:"",
                errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
                add_step:0,
                order: '',
                by: ''
            }
        },
        created() {
            this.loadData()
            this.getLine()
        },
        methods:{
            getSetType(type) {  
                $('#'+type).modal('show')      
            },
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            getStep(step) {
                this.add_step = step
            },
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                this.add_step = 0
                this.add_data = {}
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
                if (type=='add') {
                    $('#modal').modal('hide')
                    $('#trap_modal').modal('show')
                }
            },  
            getLine() {
                SystemService.getLine()
                .then((res) => {
                    
                    if (res.errcode === 0) {
                        this.select_item = res.group_id.map((item)=>{
                            return  this.$t('common.tableRoad') + item
                        })
                    }
                })
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.loadData()
            },
            rankData (param) {
                this.order = param.order
                this.by = param.by
                this.loadData()
            },
            loadData() {
                let params = {
                    page: this.cur_page,
                    row: this.size,
                    order: this.order,
                    by: this.by
                }
                defendService.getSafePolt(8, params)
                .then((res) => {					
					if (res.errcode === 0) {
						this.total_num = res['8'].count			
                        this.tableData =  res['8'].data.map((item)=>{
                            item.group_id = this.$t('common.tableRoad') + item.group_id
                            item.vlan_id = String(item.vlan_id)
                            switch (item.t_ip_type) {
                                case 0:
                                    item.t_ip_type = "-"
                                    break;
                                case 1:
                                    item.t_ip_type = this.$t('safeplot.Vip')
                                    break;
                                case 2:
                                    item.t_ip_type = this.$t('safeplot.Wip')
                                    break;
                                case 3:
                                    item.t_ip_type = `${this.$t('safeplot.Vip')},${this.$t('safeplot.Wip')}`
                                    break;
                                default:
                                    break;
                            }
                            return item
                        })   
                    } 
				})
            },    

            paramsFormat(params){//参数处理
                params.group_id = params.group_id?params.group_id.replace(/[^0-9]/ig,""):''//取线路数字
                switch (params.t_ip_type) {
                    case this.$t('safeplot.Vip'):
                        params.t_ip_type = 1
                        break;
                    case this.$t('safeplot.Wip'):
                        params.t_ip_type = 2
                         break;
                    case `${this.$t('safeplot.Vip')},${this.$t('safeplot.Wip')}`:
                        params.t_ip_type = 3
                        break;
                    default:
                        params.t_ip_type = 0
                        break;
                }
                params.s_port = params.s_port?params.s_port:''
                params.s_ip = params.s_ip?params.s_ip:''

                return params
            },
            addData(params) {
                this.status ='ing'
                let f_params =  this.paramsFormat(params)
                let sendStr = `${f_params.name}|${f_params.t_ip_mac}|${f_params.t_ip_type}|${f_params.t_port}|${f_params.s_ip}|${f_params.s_port}|${f_params.vlan_id}|${f_params.group_id}`
                defendService.addSafePolt(8, {8: sendStr})
                .then((res) => {					
                    if (res.errcode === 0) {
                        this.status ='ok'         
                        this.loadData()
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage
                    }
				})
            },
            delData(params) {
                this.status ='ing'
                defendService.delSafePolt(8, {8: params.ids})
                .then((res) => {
					
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.selectedItems =[]
                        this.loadData()
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage
                    }
				})
            },
            editData (params) {
                this.status ='ing'
                let f_params =  this.paramsFormat(params)
                let sendStr = `${f_params.id}|${f_params.name}|${f_params.t_ip_mac}|${f_params.t_ip_type}|${f_params.t_port}|${f_params.s_ip}|${f_params.s_port}|${f_params.vlan_id}|${f_params.group_id}`
                defendService.editSafePolt(8, {8: sendStr})
                .then((res) => {					
                    if (res.errcode === 0) {
                        this.status ='ok'         
                        this.loadData()
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage
                    }
				})
            },

        }
    }
</script>